<template>
	<view class="content">

		<view class="notice">
			<u-notice-bar :text="text" bgColor="rgba(131, 130, 130, 0.5);" color="white"></u-notice-bar>
			<view class="title">
				维修事项
			</view>
		
			<view class="noticelist">
				<view class="noticeitem">
					待维修<text>{{needrepair}}单</text>
				</view>
				<view class="noticeitem">
					已完成<text>{{areadyrepair}}单</text>
				</view>
			</view>
			
		</view>



		<view class="list">
			<navigator url="/pages/admin/detail/list?status=2" class="item">
				<view class="title">
					待维修
				</view>
				<view class="icon">
					<image src="../../static/icon/late.png"></image>
				</view>
				
			</navigator>

			<!-- <navigator url="/pages/repairer/detail" class="item">
				<view class="">
					已改派
				</view>
				<view class="icon">
				<image src="../../static/icon/return1.png"></image>
				</view>
			</navigator> -->

			<navigator url="/pages/admin/detail/list?status=6" class="item">
				<view class="">
					维修记录
				</view>
				<view class="icon">
				<image src="../../static/icon/return2.png"></image>
				</view>
			</navigator>

			<!-- <navigator url="/pages/repairer/detail" class="item">
				<view class="">
					已完成
				</view>
				<view class="icon">
				<image src="../../static/icon/finish.png"></image>
				</view>
			</navigator> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import api from '@/api/api'
	
	let text='通告：今天下午维修师傅到后期服务中心进行月度安全培训工作'
	
	let needrepair=ref(0),areadyrepair=ref(0)
	onShow(()=>{
		api.getRepairList({
			repairstatus:5
		}).then(res=>{
			if(res.status=200){
				areadyrepair.value=res.data.length
			}
		})
		
		api.getRepairList({
			repairstatus:2
		}).then(res=>{
			if(res.status=200){
				needrepair.value=res.data.length
			}
		})
	})
	
	
</script>

<style lang="scss" scoped>
	.content {
		margin: 30rpx;

		.notice {
			box-sizing: border-box;
			padding: 20rpx;
			position: relative;
			width: 100%;
			height: 250rpx;
			background-color: #0b96ff;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		
			.title{
				padding: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: white;
				text-align: center;
				
			}
			.noticelist {
				display: flex;
				justify-content: space-around;
				
				.noticeitem {
					width: 45%;
					height: 45%;
					font-size: 32rpx;
					color: white;
					display: flex;
					align-items: center;
					padding:20rpx;
					border-radius:16rpx ;
					box-sizing: border-box;
					text-align: center;
					text{
						padding-left: 20rpx;
						font-size: 32rpx;
					}
				}
				// .noticeitem:first-child{
					
				// 	background-color: #8a8dec;
				// }
				// .noticeitem:last-child{
				// 	background-color: #56dba4;
				// }
			}



		}




		.list {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.item {
				box-sizing: border-box;
				width: 45%;
				padding: 20rpx;
				// display: flex;
				// align-items: center;
				// justify-content: flex-start;
				color: white;
				// line-height: 120rpx;
				font-size: 32rpx;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
				
				.icon{
					margin-top: 20rpx;
					text-align: right;
					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
				
				
			}

			.item:first-child {
				background-color: #56dba4;
			}

			.item:nth-child(2) {
				background-color: #3abefe;
			}

			.item:nth-child(3) {
				background-color: #8a8dec;
			}

			.item:nth-child(4) {
				background-color: #56dba4;
			}

		}
	}
</style>
